<template>
    <div class="goodsList">
        <div class="top">
            <div class="w">
                <span>{{listData.product_name}}</span>
            </div>
        </div>
        <section>
            <div class="w clearfix">
                <div class="left fl">
                    <el-carousel height="540px">
                        <el-carousel-item v-for="item in bannerData" :key="item">
                            <img :src="`http://101.132.181.9/api/${item.product_picture}`" alt="">
                        </el-carousel-item>
                    </el-carousel>
                </div>
                <div class="right fr">
                    <div class="cont">
                        <p class="title">{{listData.product_name}}</p>
                        <p class="tab">{{listData.product_intro}}</p>
                        <p class="orange">小米自营</p>
                        <p class="price"><span class="orange mr">{{listData.product_selling_price}}</span><span class="gray del">{{listData.product_price}}</span></p>
                    </div>
                    <div class="card">
                        <p class="small_title clearfix">
                            <span class="fl gray">{{listData.product_name}}</span>
                            <span class="gray fr">{{listData.product_selling_price}}<span class="ml del">{{listData.product_price}}</span> </span>
                        </p>
                        <p class="orange all">总计:{{listData.product_selling_price}}元</p>
                    </div>
                    <div class="btns clearfix">
                        <span class="fl orange_btn" @click="add">加入购物车</span>
                        <span class="fr gray_btn" @click="like">喜欢</span>
                    </div>
                    <ol class="clearfix">
                        <li class="fl"><el-icon><CircleCheck /></el-icon>小米自营</li>
                        <li class="fl"><el-icon><CircleCheck /></el-icon>小米发货</li>
                        <li class="fl"><el-icon><CircleCheck /></el-icon>7天无理由退货</li>
                        <li class="fl"><el-icon><CircleCheck /></el-icon>7天价格保护</li>
                    </ol>
                </div>
            </div>
        </section>
    </div>
</template>
<script setup>
import { onMounted ,ref ,reactive , } from 'vue'
import { GetList, GetListBanner,AddCateList,Like } from '@/utils/goods.js'
import { CircleCheck } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'
import { ElMessage,ElNotification } from 'element-plus'
const listData = ref([]);
const bannerData = ref([]);
const getList = async ()=>{
    var id = route.query.id;
    let data = await GetList(id);
    let banner = await GetListBanner(id);
    listData.value = data.Product[0];
    bannerData.value = banner.ProductPicture;
    console.log(listData.value ,bannerData.value);
}
const route = useRoute();
const store = useStore();
const add = async ()=>{
    if(store.state.user_id == ''){
        return store.commit('dialog1Change');
    };
    let obj = {user_id:store.state.user_id,product_id:route.query.id};
    let data = await AddCateList(obj);
    console.log(data,8);
          ElNotification.success(data.msg)
        store.commit('AddCate',data.shoppingCartData)
}
const like = async ()=>{
    if(store.state.user_id == ''){
        return store.commit('dialog1Change');
    }
    let obj = {user_id:store.state.user_id,product_id:route.query.id};
    let data = await Like(obj);
    // console.log(data);
    if(data.code == '001'){
        ElNotification.success(data.msg);
    }
    if(data.code == '003'){
        ElNotification.error(data.msg);
    }
}

onMounted(() => {
    getList()
})
</script>
<style lang="scss" scoped>
    .top{
        width: 100%;
        height: 60px;
        border-bottom: 2px solid rgb(236, 236, 236);
        box-shadow: 0 5px 6px rgb(235, 235, 235);
        span{
            font-size: 26px;
            line-height: 60px;
        }
    }
    section{
        height: 600px;
        .left{
            width: 45%;
            margin-top: 20px;
            img{
                width: 100%;
                padding: 20px;
            }
        }
        .right{
            width: 55%;
            height: 600px;
            // background: pink;
            padding: 20px;
            .cont{
                border-bottom: 2px solid rgb(236, 234, 234);
                .title{
                    font-size: 24px;
                }
                .tab{
                    padding: 10px 0;
                    color: #777;
                }
                .price{
                    padding: 20px 0;
                }
            }
            .card{
                width: 100%;
                margin: 30px 0;
                padding: 30px 50px;
                height: 150px;
                background-color: rgb(248, 248, 248);
                .small_title{
                    font-size: 18px;
                }
                .all{
                    font-size: 24px;
                    margin-top: 20px;
                }
            }
            ol{
                width: 100%;
                color: #777;
                margin-top: 20px;
                li{
                    margin-right: 20px;
                }
            }
        }
    }
    
    .gray{
        color: #777;
    }
    .del{
        text-decoration: line-through;
    }
    .mr{
        margin-right: 10px;
    }
    .ml{
        margin-left: 10px;
    }
    .orange{
        color: orangered;
        font-size: 18px;
    }
    .orange_btn{
        display: inline-block;
        padding: 15px 0;
        text-align: center;
        width: 300px;
        background: rgb(253, 108, 12);
        color: #fff;
        border-radius: 3px;
        cursor:pointer
    }
    .gray_btn{
        display: inline-block;
        padding: 15px 0;
        text-align: center;
        width: 300px;
        background: rgb(190, 190, 190);
        color: #fff;
        border-radius: 3px;
        cursor:pointer
    }
    .gray_btn:hover{
        background: #777;
    }
</style>